<template>
  <div class="demo-main" ref="demoMain">
    <canvas id="myCanvas" ref="myCanvas"></canvas>
  </div>
</template>
<script>
import * as THREE from 'three'

export default {
  data() {
    return {
      renderer: null,
      scene: null,
      camera: null,
      light: null,
      material: null,
      geometry: null,
      mesh: null,
    }
  },
  mounted(){

    window.addEventListener('resize', this.renderHandle)
    this.renderHandle()
  },
  methods: {
    zoom() {
      this.$refs.myCanvas.width = this.$refs.demoMain.clientWidth;
      this.$refs.myCanvas.height = this.$refs.demoMain.clientHeight;
    },
    // 坐标辅助线
    axesHandle() {
      const axes = new THREE.AxesHelper(10) // 红x 绿y 蓝z
      this.scene.add(axes)
    },
    // 平台
    createPlane() {
      const PlaneGeometry = new THREE.PlaneGeometry(60, 20)
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 'red',
        side: THREE.DoubleSide // 双面
      })
      const plane = new THREE.Mesh(PlaneGeometry, planeMaterial)
      plane.rotation.x = -0.5 * Math.PI
      plane.rotation.x = 0;
      plane.rotation.y = 0
      plane.rotation.z = 0
      // 接收阴影
      plane.receiveShadow = true
      this.scene.add(plane)
      return plane
    },
    // 方块
    createCube(){
      const cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
      const cubeMaterial = new THREE.MeshLambertMaterial({
        color: '#ff0000'
      })
      const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
      cube.position.x = -4
      cube.position.y = 3
      cube.position.z = 0
      // 投射阴影
      cube.castShadow = true
      this.scene.add(cube)
      return cube
    },
    renderHandle() {
      const  {clientWidth: width, clientHeight: height} = this.$refs.demoMain
    
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        canvas: this.$refs.myCanvas
      })
      // 告诉渲染器 需要阴影映射
      this.renderer.shadowMap.enabled = true
      this.renderer.setSize(width, height)
      this.renderer.setClearColor('#B4D3BA')
      // 场景
      this.scene = new THREE.Scene()
      //雾化效果
      this.scene.fog = new THREE.Fog('#ffffff', 0.015,100);

      // 相机
      this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
      this.camera.position.set(-30, 40, 30)
      this.camera.lookAt(this.scene.position)

      this.axesHandle()

      // 通过SpotLight创建一个光源
      this.light = new THREE.SpotLight('#ffffff')
      this.light.position.set(-40, 60, -10)
      // !需要给光源同样设置投射阴影
      this.light.castShadow = true
      this.scene.add(this.light)
    
      const plane = this.createPlane()
      const cube = this.createCube()
      // this.renderer.render(this.scene, this.camera)
      this.animation(plane, cube)
    },
    animation(plane, cube) {
      let i = 0.001
      setInterval(() => {
        i = i + 0.001
        plane.rotation.x = i * Math.PI
        cube.rotation.x = i * Math.PI
        this.renderer.render(this.scene, this.camera)
      })
    }
  }
}
</script>

<style lang="less">
.demo-main{
  width: 100%;
  height: 100%
}
</style>
